<template>
  <a-row :gutter="10">
    <a-col :md="24" :sm="24" style="margin-bottom: 20px">
      <a-card :bordered="false">
        <!-- 查询区域 -->
        <div class="table-page-search-wrapper">
          <!-- 搜索区域 -->
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="12" :sm="8">
                <a-form-item label="角色名称" :labelCol="{span: 5}" :wrapperCol="{span: 18, offset: 1}">
                  <j-input placeholder="" v-model="queryParam.roleName"></j-input>
                </a-form-item>
              </a-col>
              <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
                <a-col :md="12" :sm="24">
                  <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 21px">查询</a-button>
                  <!--<a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
                  <a-button v-has="'role:add'" @click="handleAdd" type="primary" icon="plus">新增</a-button>
                </a-col>
              </span>
            </a-row>
          </a-form>
        </div>

        <div style="margin-top: 15px">
          <a-table
            style="height:500px"
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange">
            <span slot="isEnable" slot-scope="text, record">
              <a-switch
                checked-children="启用"
                un-checked-children="禁用"
                :disabled="record.roleType === 2"
                :checked="record.isEnable === 1"
                @click="isEnableEdit(record)"/>
            </span>
            <span slot="action" slot-scope="text, record">
              <a @click="handleRoleUser(record)">成员</a>
              <a-divider type="vertical"/>
              <!--<a v-has="'role:appAuth'" @click="handleAppPerssion(record)" v-if="record.isDefault ">应用授权</a>
              <a-divider type="vertical" v-if="record.isDefault"/>-->
              <a v-has="'role:edit'" @click="handleEdit(record)" v-if="!record.isDefault || isSuperTenant">编辑</a>
              <a v-has="'role:queryById'" @click="handleDetail(record)" v-else>查看</a>
              <a-divider type="vertical" v-if="!record.isDefault && record.roleType == 1"/>
              <a v-has="'role:authAssign'" @click="handleTenantPerssion(record)" v-if="!record.isDefault && record.roleType == 1">授权分配</a>
              <a-divider type="vertical" v-if="!record.isDefault || isSuperTenant"/>
              <a-popconfirm v-has="'role:delete'" title="确定删除吗?" @confirm="() => doDelete(record.id)" v-if="!record.isDefault || isSuperTenant">
                <a>删除</a>
              </a-popconfirm>
            </span>
            <span slot="appNames" slot-scope="text, record">
              <span v-if="text.length === 1">{{ text[0] }}</span>
              <span v-if="text.length > 1" :title="text.join('，')">{{ text[0] }}...</span>
            </span>
          </a-table>
        </div>
        <!-- 右侧的角色权限配置 -->
        <user-role-modal ref="modalUserRole" @ok="modalFormOk"></user-role-modal>
        <role-modal ref="modalForm" @ok="modalFormOk"></role-modal>
        <tenant-role-modal ref="modalTenatRole" @ok="modalFormOk"></tenant-role-modal>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
  import { JeecgListMixin } from '@/mixins/JeecgListMixin.js'
  import RoleModal from './modules/RoleModal.vue'
  import UserRoleModal from './modules/UserRoleModal.vue'
  import moment from 'moment'
  import TenantRoleModal from './modules/TenantRoleModal.vue'
  import Vue from 'vue';
  import { IS_SUPER_TENANT } from '@/store/mutation-types'
  import { api, editRole } from './service.js'

  export default {
    name: 'RoleUserList',
    mixins: [JeecgListMixin],
    components: {
      UserRoleModal,
      RoleModal,
      moment,
      TenantRoleModal
    },
    data() {
      let that = this;
      return {
        isSuperTenant: Vue.ls.get(IS_SUPER_TENANT),
        currentRoleId: '',
        columns:
          [
            {
              title: '#',
              dataIndex: '',
              key: 'rowIndex',
              width: 60,
              align: 'center',
              customRender: function (t, r, index) {
                return (that.ipagination.current - 1) * that.ipagination.pageSize + index + 1;
              }
            }, {
              title: '角色名称',
              dataIndex: 'roleName'
            },
            {
              title: '角色编码',
              dataIndex: 'roleCode'
            },
            {
              title: '状态',
              dataIndex: 'isEnable',
              align: 'center',
              scopedSlots: { customRender: 'isEnable' }
            },
            {
              title: '已分配的应用',
              dataIndex: 'appNames',
              scopedSlots: { customRender: 'appNames' }
            },
            {
              title: '操作',
              dataIndex: 'action',
              align: 'center',
              scopedSlots: { customRender: 'action' }
            }
          ],
        url: {
          list: api.list,
          delete: ''
        }
      }
    },
    computed: {

    },
    methods: {
      isEnableEdit(formData) {
        let that = this
        if (formData.isEnable === 1) {
          formData.isEnable = 0
        } else {
          formData.isEnable = 1
        }
        editRole(formData).then((res) => {
          if (res.success) {
            that.$message.success('操作成功')
            that.$emit('ok')
          } else {
            that.$message.warning('操作失败')
          }
        })
      },
      doDelete(id) {
        this.url.delete = api.delete(id);
        this.handleDelete(id)
        this.currentRoleId = ''
      },
      // App应用授权权限
      handleAppPerssion(record) {
        this.$refs.modalUserRole.show(record.id, record.isDefault);
      },
      // 租户角色授权
      handleTenantPerssion(record) {
        this.$refs.modalTenatRole.edit(record);
      },
      // 人员
      handleRoleUser(record) {
        this.$router.push({ name: 'roles-users', params: { roleId: record.id } })
      }
    }
  }
</script>
<style scoped>
  /** Button按钮间距 */
  .ant-btn {
    margin-left: 8px
  }
</style>
